<template>
  <el-container class="element-plus-test">
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="header">
      <h2>Element Plus 组件测试平台</h2>
    </el-header>
    
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="250px" class="aside">
        <!-- 组件列表面板 -->
        <component-list
          :components="availableComponents"
          :active-component="currentComponent ? currentComponent.name : ''"
          @select-component="handleSelectComponent"
        />
      </el-aside>
      
      <!-- 主内容区域 -->
      <el-main class="main">
        <!-- 预览区域 -->
        <preview-area
          :current-component="currentComponent"
          :component-props="componentProps"
          :component-events="componentEvents"
          :component-slots="componentSlots"
          :component-children="componentChildren"
          :component-instances="componentInstances"
          :preview-count="previewCount"
          :preview-layout="previewLayout"
          :editing-instance-index="editingInstanceIndex"
          @add-instance="addComponentInstance"
          @edit-instance="editComponentInstance"
          @remove-instance="removeComponentInstance"
        />
      </el-main>
      
      <!-- 右侧属性面板 -->
      <el-aside width="300px" class="aside">
        <!-- 属性配置面板 -->
        <property-panel
          :current-component="currentComponent"
          v-model:component-props="componentProps"
          v-model:component-events="componentEvents"
          v-model:component-slots="componentSlots"
          v-model:component-children="componentChildren"
          v-model:preview-count="previewCount"
          v-model:preview-layout="previewLayout"
          :available-slot-components="availableSlotComponents"
          v-model:active-tab="activeTab"
        />
      </el-aside>
    </el-container>
    
    <!-- 底部信息栏 -->
    <el-footer height="40px" class="footer">
      <span>Element Plus v2.x | Vue 3.x</span>
    </el-footer>
  </el-container>
</template>

<script>
import { defineComponent, ref, reactive, computed, watch } from 'vue'
import { componentConfigs } from '../components/element-plus-test/component-configs'
import ComponentList from '../components/element-plus-test/ComponentList.vue'
import PreviewArea from '../components/element-plus-test/PreviewArea.vue'
import PropertyPanel from '../components/element-plus-test/PropertyPanel.vue'

export default defineComponent({
  name: 'ElementPlusTest',
  components: {
    ComponentList,
    PreviewArea,
    PropertyPanel
  },
  setup() {
    // 可用组件列表
    const availableComponents = ref(componentConfigs)
    console.log('Available components:', componentConfigs)
    
    // 当前选中的组件
    const currentComponent = ref(null)
    
    // 组件属性
    const componentProps = ref({})
    
    // 组件事件
    const componentEvents = ref({})
    
    // 组件插槽
    const componentSlots = ref({})
    
    // 组件子组件
    const componentChildren = ref({})
    
    // 预览数量
    const previewCount = ref(1)
    
    // 预览布局
    const previewLayout = reactive({
      direction: 'row',
      gap: 10,
      columns: 3
    })
    
    // 组件实例列表
    const componentInstances = ref([])
    
    // 当前编辑的实例索引
    const editingInstanceIndex = ref(-1)
    
    // 当前活动的标签页
    const activeTab = ref('props')
    
    // 可用于插槽的组件
    const availableSlotComponents = computed(() => {
      return availableComponents.value.filter(comp => comp.canBeSlotContent)
    })
    
    // 处理选择组件
    const handleSelectComponent = (componentName) => {
      const component = availableComponents.value.find(comp => comp.name === componentName)
      if (component) {
        currentComponent.value = component
        
        // 初始化组件属性
        componentProps.value = {}
        if (component.props) {
          Object.entries(component.props).forEach(([key, prop]) => {
            componentProps.value[key] = prop.default !== undefined ? prop.default : ''
          })
        }
        
        // 初始化组件事件
        componentEvents.value = {}
        if (component.events) {
          Object.keys(component.events).forEach(key => {
            componentEvents.value[key] = false
          })
        }
        
        // 初始化组件插槽
        componentSlots.value = {}
        if (component.slots) {
          Object.entries(component.slots).forEach(([key, slot]) => {
            componentSlots.value[key] = {
              content: slot.default || '',
              isComponent: slot.isComponent || false,
              props: {}
            }
            
            // 如果有属性配置，初始化属性
            if (slot.propsConfig) {
              Object.entries(slot.propsConfig).forEach(([propKey, propConfig]) => {
                componentSlots.value[key].props[propKey] = propConfig.default !== undefined ? propConfig.default : ''
              })
            }
          })
        }
        
        // 初始化子组件
        componentChildren.value = {}
        if (component.childComponents) {
          component.childComponents.forEach(childComp => {
            componentChildren.value[childComp.name] = {
              name: childComp.name,
              props: {},
              slots: {}
            }
            
            // 初始化子组件属性
            if (childComp.props) {
              Object.entries(childComp.props).forEach(([propKey, propConfig]) => {
                componentChildren.value[childComp.name].props[propKey] = 
                  propConfig.default !== undefined ? propConfig.default : ''
              })
            }
            
            // 初始化子组件的插槽
            if (childComp.slots) {
              Object.entries(childComp.slots).forEach(([slotKey, slotConfig]) => {
                componentChildren.value[childComp.name].slots[slotKey] = {
                  content: slotConfig.default || '',
                  isComponent: slotConfig.isComponent || false,
                  props: {}
                }
                
                // 初始化插槽属性
                if (slotConfig.propsConfig) {
                  Object.entries(slotConfig.propsConfig).forEach(([propKey, propConfig]) => {
                    componentChildren.value[childComp.name].slots[slotKey].props[propKey] = 
                      propConfig.default !== undefined ? propConfig.default : ''
                  })
                }
              })
            }
          })
        }
        
        // 重置组件实例列表和编辑索引
        componentInstances.value = []
        editingInstanceIndex.value = -1
        
        // 切换到属性标签页
        activeTab.value = 'props'
      }
    }
    
    // 预留区组件
    const reservedComponents = ref([])
    
    // 添加组件实例
    const addComponentInstance = () => {
      if (!currentComponent.value) return
      
      const newInstance = {
        component: currentComponent.value,
        props: JSON.parse(JSON.stringify(componentProps.value)),
        events: JSON.parse(JSON.stringify(componentEvents.value)),
        slots: JSON.parse(JSON.stringify(componentSlots.value)),
        children: JSON.parse(JSON.stringify(componentChildren.value))
      }
      
      // 添加到预留区
      reservedComponents.value.push(newInstance)
      
      // 同时添加到实例列表保持兼容
      componentInstances.value.push(JSON.parse(JSON.stringify(newInstance)))
    }
    
    // 编辑组件实例
    const editComponentInstance = (index) => {
      if (index < 0 || index >= componentInstances.value.length) return
      
      const instance = componentInstances.value[index]
      
      // 设置当前组件
      currentComponent.value = instance.component
      
      // 设置属性
      componentProps.value = JSON.parse(JSON.stringify(instance.props))
      
      // 设置事件
      componentEvents.value = JSON.parse(JSON.stringify(instance.events))
      
      // 设置插槽
      componentSlots.value = JSON.parse(JSON.stringify(instance.slots))
      
      // 设置子组件
      componentChildren.value = JSON.parse(JSON.stringify(instance.children))
      
      // 设置编辑索引
      editingInstanceIndex.value = index
      
      // 切换到属性标签页
      activeTab.value = 'props'
    }
    
    // 移除组件实例
    const removeComponentInstance = (index) => {
      if (index < 0 || index >= componentInstances.value.length) return
      
      componentInstances.value.splice(index, 1)
      
      // 如果正在编辑的实例被删除，重置编辑索引
      if (editingInstanceIndex.value === index) {
        editingInstanceIndex.value = -1
      } else if (editingInstanceIndex.value > index) {
        // 如果删除的是前面的实例，调整编辑索引
        editingInstanceIndex.value--
      }
    }
    
    // 监听编辑索引变化，更新组件实例
    watch([componentProps, componentEvents, componentSlots, componentChildren], () => {
      if (editingInstanceIndex.value >= 0 && editingInstanceIndex.value < componentInstances.value.length) {
        componentInstances.value[editingInstanceIndex.value] = {
          component: currentComponent.value,
          props: JSON.parse(JSON.stringify(componentProps.value)),
          events: JSON.parse(JSON.stringify(componentEvents.value)),
          slots: JSON.parse(JSON.stringify(componentSlots.value)),
          children: JSON.parse(JSON.stringify(componentChildren.value))
        }
      }
    }, { deep: true })

    return {
      availableComponents,
      currentComponent,
      componentProps,
      componentEvents,
      componentSlots,
      componentChildren,
      previewCount,
      previewLayout,
      componentInstances,
      editingInstanceIndex,
      activeTab,
      availableSlotComponents,
      handleSelectComponent,
      addComponentInstance,
      editComponentInstance,
      removeComponentInstance
    }
  }
})
</script>

<style scoped>
.element-plus-test {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: var(--el-color-primary);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.aside {
  background-color: var(--el-bg-color-page);
  border-right: 1px solid var(--el-border-color-light);
  overflow-y: auto;
}

.main {
  padding: 20px;
  background-color: var(--el-bg-color);
  overflow-y: auto;
}

.footer {
  background-color: var(--el-bg-color-page);
  border-top: 1px solid var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

/* 保持原有功能区域样式 */
.element-plus-test >>> .el-container {
  flex: 1;
  overflow: hidden;
}

.element-plus-test >>> .el-aside {
  height: 100%;
}

.element-plus-test >>> .el-main {
  height: 100%;
}
</style>